<template>
<div id="bottomBar">
    <div @click="btnItem('/home')" :class="{color: $route.path=='/home'}">
        <span class="iconfont icon-yinle"></span>
        <span>发现</span>
    </div>
    <div @click="btnItem('/boke')" :class="{color: $route.path=='/boke'}" >
        <span class="iconfont icon-diantai"></span>
        <span>播客</span>
    </div>
    <div @click="btnItem('/profile')" :class="{color: $route.path=='/profile'}" >
        <span class="iconfont icon-wode-"></span>
        <span>我的</span>
    </div>
    <div @click="btnItem('/yuncun')" :class="{color: $route.path=='/yuncun'}" >
        <span class="iconfont icon-shequ-jihuo"></span>
        <span>云村</span>
    </div>
</div>
</template>

<script>
export default {
    name: "",
    data() {
        return {

        }
    },
    components: {},
    methods: {
        btnItem(path) {
            console.log(`点击+${path}`);
            this.$router.push({
                path: path,
                query: {}
            })
        },
    },
    computed:{
    }
}
</script>

<style lang="less" scoped>
#bottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: rgb(248, 117, 117);
    height: 1rem;
    width: 100%;
    overflow: hidden;
    z-index: 999;

    display: flex;
    align-items: center;

    >div {
        width: 25%;
        height: 100%;
        margin-top: .05rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        color: rgb(61, 60, 60);

        >span {
            &:nth-of-type(2) {
                font-size: .28rem;
            }
        }
    }
    .color{
        color: #fff;
        background-color: red;
    }
}
</style>
